<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>零件信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element.css">
</head>
<body>
<div id="app" style="width: 90%; margin: 0 auto">
    <h2>零件管理系统</h2>

    <el-row>
        <el-col :span="7" style="margin-bottom: 10px">
            <h4>零件</h4>
            <el-tag style="width: 90%" effect="dark" @click="dia_search_part_vis">
                {{tag}}
            </el-tag>
        </el-col>

        <el-col :span="7" style="margin-bottom: 10px">
            <h4>容器</h4>
            <el-tag style="width: 90%" effect="dark" @click="dia_search_container_vis">
                {{store_container_name}}
            </el-tag>
        </el-col>
        <el-col :span="4" style="margin-bottom: 10px">
            <h4>数量</h4>
            <el-input v-model="form.store_quality" style="width: 50%" ></el-input>
        </el-col>
        <el-col :span="6" style="margin-bottom: 10px">
            <h4>操作</h4>
            <el-button type="primary" @click="loadTable(store_pid, store_container_pid)">查询</el-button>
            <el-button type="primary" @click="store_part_env(store_pid, store_container_pid)">入库</el-button>
            <el-button type="primary" @click="add">新增</el-button>
        </el-col>
    </el-row>

    <el-row>

        <el-col :span="15" style="margin-bottom: 10px">
            <el-input v-model="form.part_name_f" style="width: 80%" ></el-input>
            <el-button type="primary" @click="fuzzy_search_ev">模糊查询</el-button>
        </el-col>
    </el-row>


    <el-table
            :data="page.content"
            stripe
            border
            style="width: 100%">
        <el-table-column
                prop="store_rid"
                label="序列号"
                min-width="20%"
        >
        </el-table-column>

        <el-table-column
                prop="store_name"
                label="零件名称"
        >
        </el-table-column>

        <el-table-column
                prop="store_container_name"
                label="容器">
        </el-table-column>
        <el-table-column
                prop="store_quality"
                label="数量"
                min-width="20%">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="small" circle @click="change_quality_env(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small" circle @click=""></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
            title="零件信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="零件名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="零件类型">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 入库时的零件查询 -->
    <el-dialog
            title="零件查询"
            :visible.sync="dia_search_part_visible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="零件编号">
                <el-input v-model="form.pid"></el-input>
            </el-form-item>
            <el-form-item label="零件名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dia_search_part_visible = false">取 消</el-button>
            <el-button type="primary" @click="dia_search_part_evn" >确 定</el-button>
        </span>
    </el-dialog>

    <!-- 入库时的零件选择 -->
    <el-dialog
            title="零件选择"
            :visible.sync="dia_select_part_visible"
            width="80%">
        <el-form ref="form" :model="form" >
            <el-table
                    :data="page.content"
                    stripe
                    border
                    style="width: 100%">

                <el-table-column
                        prop="pid"
                        label="零件id"
                >
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="零件名称"
                >
                </el-table-column>

                <el-table-column
                        prop="type_of_parts"
                        label="零件名称"
                >
                </el-table-column>

                <el-table-column
                        prop="picture"
                        label="图片"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" @click="dia_select_part_evn(scope.row.name, scope.row.pid)">选择</el-button>
                    </template>
                </el-table-column>


            </el-table>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dia_select_part_visible = false">取 消</el-button>
        </span>
    </el-dialog>

    <!-- 入库时的容器查询 -->
    <el-dialog
            title="容器查询"
            :visible.sync="dia_search_container_visible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="容器编号">
                <el-input v-model="form.pid"></el-input>
            </el-form-item>
            <el-form-item label="容器名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dia_search_container_visible = false">取 消</el-button>
            <el-button type="primary" @click="dia_search_container_evn" >确 定</el-button>
        </span>
    </el-dialog>

    <!-- 入库时的容器选择 -->
    <el-dialog
            title="容器选择"
            :visible.sync="dia_select_container_visible"
            width="80%">
        <el-form ref="form" :model="form" >
            <el-table
                    :data="page.content"
                    stripe
                    border
                    style="width: 100%">

                <el-table-column
                        prop="pid"
                        label="容器id"
                >
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="容器名称"
                >
                </el-table-column>

                <el-table-column
                        prop="type_of_parts"
                        label="容器名称"
                >
                </el-table-column>

                <el-table-column
                        prop="picture"
                        label="图片"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" @click="dia_select_container_evn(scope.row.name, scope.row.pid)">选择</el-button>
                    </template>
                </el-table-column>


            </el-table>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dia_select_container_visible = false">取 消</el-button>
        </span>
    </el-dialog>

    <!-- 调整库存数量 -->
    <el-dialog
        title="调整数量"
        :visible.sync="dia_adj_store_quality_visible"
        width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="序列号" >
                <el-input v-model="form.store_rid" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="零件名称">
                <el-input v-model="form.store_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="容器">
                <el-input v-model="form.store_container_name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="form.store_quality"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dia_adj_store_quality_visible = false">取 消</el-button>
            <el-button type="primary" @click="save_adj_quality_env" >确 定</el-button>
        </span>

    </el-dialog>

</div>

<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="element.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            page: {},
                options: [{
                    value: '1',
                    label: '零件'
                }, {
                    value: '2',
                    label: '组件'
                }, {
                    value: '3',
                    label: '容器'
                }],
                value: '',
            tag: '零件查询',
            name: '',
            pid: '',
            part: '',
            container: '',
            quality: '',
            pageNum: 1,
            pageSize: 8,
            //入库零件的pid
            store_pid: '-1',
            //入库容器标签的tag
            store_container_name: '容器查询',
            //入库容器的pid
            store_container_pid: '-1',
            //入库得数量
            store_quality: '-1',
            //模糊查询
            part_name_f: '',


            dialogVisible: false,
            dialogPartsVisible: false,
            dia_search_part_visible: false,
            dia_select_part_visible: false,
            dia_search_container_visible: false,
            dia_select_container_visible: false,
            dia_adj_store_quality_visible: false,
            form: {}
        },
        methods: {
            loadTable(store_pid, store_container_pid) {
                $.get("/parts/page?store_pid=" + store_pid + "&store_container_pid=" + store_container_pid).then(res => {
                    this.page = res.data;
                });
            },

            fuzzy_search_ev() {
                $.get("/parts/page?part_name_f=" + this.form.part_name_f).then(res => {
                    this.page = res.data;
                });
            },

            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            searchparts(store_pid, store_container_pid) {
                $.ajax({
                    url: '/parts/search',
                    type: 'post',
                    contentType: 'application/json',
                    data: data
                }).then(res => {

                })
            },
            dia_search_part_vis () {
                this.dia_search_part_visible = true;
                this.form = {};
            },

            //打开入库容器查询
            dia_search_container_vis () {
                this.dia_search_container_visible = true;
                this.form = {};
            },
            //入库零件查询
            dia_search_part_evn () {
                $.get("/parts/search?pid=" + this.form.pid + "&name=" + this.form.name).then(res => {
                    this.dia_search_part_visible = false;
                    this.dia_select_part_visible = true;
                    this.page = res.data;

                })

            },

            //入库零件选择
            dia_select_part_evn (part_name, part_pid) {
                this.dia_select_part_visible = false;
                this.tag = part_name;
                this.store_pid = part_pid;
            },

            //入库容器查询
            dia_search_container_evn () {
                $.get("/parts/container?pid=" + this.form.pid + "&name=" + this.form.name).then(res => {
                    this.dia_search_container_visible = false;
                    this.dia_select_container_visible = true;
                    this.page = res.data;

                })

            },

            //入库容器选择
            dia_select_container_evn (part_name, part_pid) {
                this.dia_select_container_visible = false;
                this.store_container_name = part_name;
                this.store_container_pid = part_pid;
            },

            //入库操作
            store_part_env(store_pid, store_container_pid) {
                console.log(store_pid);
                console.log(store_container_pid);
                this.form.store_pid = store_pid;
                this.form.store_container_pid = store_container_pid;
                let data = JSON.stringify(this.form);
                $.ajax({
                    url: '/parts/store',
                    type: 'post',
                    contentType: 'application/json',
                    data: data
                }).then(res => {

                })
            },

            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 编辑
                    $.ajax({
                        url: '/parts',
                        type: 'put',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: '/parts',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                    })
                }
            },

            change_quality_env(row){
                this.form=row;
                this.dia_adj_store_quality_visible=true;
            },

            save_adj_quality_env(){
                let data = JSON.stringify(this.form);
                $.ajax({
                    url: '/parts/adjstore',
                    type: 'post',
                    contentType: 'application/json',
                    data: data
                }).then(res => {
                    this.dia_adj_store_quality_visible=false;
                    this.page = res.data;

                })

            },
        }
    })
</script>

</body>
</html>
